<template>
  <div class="son1">
    <h2>大儿子组件</h2>
    <input type="text" :value="mother" placeholder="大儿子母亲" key="son1Mother">
    <input type="text" :value="Son1WifeName" placeholder="大儿子老婆" @input="son1InpChange" key="son1Wife">
  </div>
</template>

<script>
import Import from '@/js/import.js'
export default {
  name: 'Son1',
  props: ['mother'],
  data () {
    return {
      Son1WifeName: ''
    }
  },
  methods: {
    son1InpChange (e) {
      this.Son1WifeName = e.target.value
      this.$emit('son1InpChange', e.target.value)
      Import.$emit('son1InpChange', e.target.value)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.son1 {
  input {
    padding: 5px;
    margin: 2px;
  }
}
</style>
